<template>

  <div class="card" style="margin: 10px 0;">
    <div style="font-size: 20px; font-weight: bold; margin-bottom: 15px">评论</div>
    <div style="margin-bottom: 20px">
      <el-input type="textarea" placeholder="请输入评论内容" v-model="form.content"></el-input>
      <div style="margin-top: 5px; text-align: right">
        <el-button type="primary" @click="addComment(null)">评论</el-button>
      </div>
    </div>

    <div>
      <div v-for="item in commentList" :key="item.id" style="display: flex; grid-gap: 15px; margin-bottom: 20px">
        <img :src="item.userinfo.userPic" alt="" style="width: 50px; height: 50px; border-radius: 50%">
        <div style="flex: 1;">
          <div style="margin-bottom: 5px; color: #666">{{ item.userinfo.userNickname }}</div>
          <div style="margin-bottom: 5px">{{ item.content }}</div>
          <div style="font-size: 13px; color: #666; margin-bottom: 10px">
            <span>{{ item.time }}</span>
            <span style="margin: 0 20px; cursor: pointer" @click="handleReply(item)" :class="{ 'highLight' : item.showReply }">
                <i class="el-icon-s-comment"></i>回复
              </span>
            <span style="cursor: pointer" @click="del(item.id)" v-if="user.id === item.userId">
                <i class="el-icon-delete"></i>删除
              </span>
          </div>
          <div style="margin-bottom: 10px" v-if="item.showReply">
            <el-input type="textarea" v-model="item.reply" placeholder="请输入回复内容"></el-input>
            <div style="margin-top: 5px; text-align: right">
              <el-button type="primary" size="mini" @click="addComment(item)">回复</el-button>
            </div>
          </div>

          <div v-if="item.children.length">
            <div v-for="sub in item.children" :key="sub.id" style="display: flex; grid-gap: 15px; margin-bottom: 10px">
              <img :src="sub.userinfo.userPic" alt="" style="width: 50px; height: 50px; border-radius: 50%">
              <div style="flex: 1;">
                <div style="margin-bottom: 5px; color: #666">{{ sub.userinfo.userNickname }}  <span v-if="sub.replyUser && sub.replyUser !== item.userinfo.userNickname">回复 {{ sub.replyUser }}</span></div>
                <div style="margin-bottom: 5px">{{ sub.content }}</div>
                <div style="font-size: 13px; color: #666; margin-bottom: 10px">
                  <span>{{ sub.time }}</span>
                  <span style="margin: 0 20px; cursor: pointer"  :class="{ 'highLight' : sub.showReply }">

                    </span>
                  <span style="cursor: pointer" @click="del(sub.id)" v-if="user.id === sub.userId">
                      <i class="el-icon-delete"></i>删除
                    </span>
                </div>
                <div style="margin-bottom: 10px" v-if="sub.showReply">
                  <el-input type="textarea" v-model="sub.reply" placeholder="请输入回复内容"></el-input>
                  <div style="margin-top: 5px; text-align: right">
                    <el-button type="primary" size="mini" @click="addComment(sub)">回复</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {listComment, getComment, delComment, addComment, updateComment,selectTree} from "@/api/project/comment";
export default {
  name: "index",
  props: {
    id: {
      type: Number,
    },
    table: {
      type: String,
    },
    type: {
      type: String,
    },


  },
  data() {
    return {
      form: {},
      commentList: [],
      user: ""
    };
  },
  created() {
    this.user=JSON.parse(localStorage.getItem("userInfo"))
    this.loadComment()
  },
  methods:{
    del(id) {   // 单个删除
      if (!localStorage.getItem("userInfo")) {
        this.$message.error("请先登录！");
        return;
      }
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        delComment({id:id}).then(res => {
          if (res.data == 1) {   // 表示操作成功
            this.$message.success('操作成功')
            this.loadComment()
          } else {
            this.$message.error('操作失败')  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    handleReply(comment) {
      if (!localStorage.getItem("userInfo")) {
        this.$message.error("请先登录！");
        return;
      }
      this.$set(comment, 'showReply',  !comment.showReply)
    },
    addComment(pComment) {  // pComment表示父级的评论对象
      // 判断是否登录,没有登录则显示登录组件
      if (!localStorage.getItem("userInfo")) {
        this.$message.error("请先登录！");
        return;
      }


      this.form.module = this.table   //
      this.form.fid = this.id  //
      this.form.type = this.type
      this.form.userId = this.user.id
      if (pComment) {   // 表示回复
        this.form.pid = pComment.id
        this.form.content = pComment.reply
      }
      addComment(this.form).then(res => {
        if (res.data == 1) {
          this.$message.success('操作成功')
          this.form = {}
          this.loadComment()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    loadComment() {

      selectTree(this.id,this.table).then(res => {
        console.log("res.data",res.data)
        this.commentList = res.data || []
      })
    },

  },
}
</script>

<style scoped>

</style>
